<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="http://www.dcloud.io/hellomui/css/mui.min.css" rel="stylesheet" />
  <script src="http://www.dcloud.io/hellomui/js/mui.min.js"></script>
  <script type="text/javascript">
    mui.init()
  </script>
  <style type="text/css">
    body{font-family: "Microsoft YaHei",sans-serif;color:#333;background-color: #F1E9DC;}
    div.mui-content{background-color: #F1E9DC;}
    p{margin-bottom: 0px;}
    .mui-slider-indicator.mui-segmented-control{
      padding: 5px 10px;
      background: #FFF;
    }
    .mui-segmented-control.mui-scroll-wrapper{
      height: 45px;
    }
    .mui-segmented-control.mui-scroll-wrapper .mui-control-item{
      width: 100px;
      border: 1px solid #ccc;
      box-shadow:0 0 5px #aaa;
      line-height: 30px;
    }
    .mui-segmented-control.mui-scroll-wrapper .mui-control-item.mui-active{
      color: #fff;
      background-color: #78909C;
    }
    .mui-fullscreen .mui-segmented-control~.mui-slider-group{
      top: 45px;
    }
    .mui-slider-group .mui-scroll-wrapper{
      padding-top: 5px;
    }
  </style>
</head>

<body>

<div class="mui-content">
  <div id="slider" class="mui-slider mui-fullscreen">
    <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
      <div class="mui-scroll">
        <a class="mui-control-item mui-active" data-index="0">卡片</a>
        <a class="mui-control-item" data-index="1">图表</a>
        <a class="mui-control-item" data-index="2">其他</a>
        <a class="mui-control-item" data-index="3">其他</a>
        <a class="mui-control-item" data-index="4">其他</a>
        <a class="mui-control-item" data-index="5">其他</a>
      </div>
    </div>
    <div class="mui-slider-group">
      <div class="mui-slider-item mui-control-content mui-active">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            <div class="mui-card">
              <div class="mui-card-content">
                <div class="mui-card-content-inner">
                  这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
                </div>
              </div>
            </div>
            <div class="mui-card">
              <div class="mui-card-header">页眉</div>
              <div class="mui-card-content">
                <div class="mui-card-content-inner">
                  包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
                </div>
              </div>
              <div class="mui-card-footer">页脚</div>
            </div>
            <div class="mui-card">
              <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(http://www.dcloud.io/hellomui/images/cbd.jpg)"></div>
              <div class="mui-card-content">
                <div class="mui-card-content-inner">
                  <p>Posted on January 18, 2016</p>
                  <p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
                </div>
              </div>
              <div class="mui-card-footer">
                <a class="mui-card-link">Like</a>
                <a class="mui-card-link">Read more</a>
              </div>
            </div>
            <div class="mui-card">
              <div class="mui-card-header mui-card-media">
                <img src="http://www.dcloud.io/hellomui/images/logo.png" style="width:34px">
                <div class="mui-media-body">
                  小M
                  <p>发表于 2016-06-30 15:30</p>
                </div>
              </div>
              <div class="mui-card-content" >
                <img src="http://www.dcloud.io/hellomui/images/yuantiao.jpg" alt="" width="100%"/>
              </div>
              <div class="mui-card-footer">
                <a class="mui-card-link">Like</a>
                <a class="mui-card-link">Comment</a>
                <a class="mui-card-link">Read more</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mui-slider-item mui-control-content">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            <ul class="mui-table-view mui-grid-view">
              <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a href="#">
                  <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/shuijiao.jpg">
                  <div class="mui-media-body">幸福就是可以一起睡觉</div>
                </a>
              </li>
              <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a href="#">
                  <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/muwu.jpg">
                  <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
                </a>
              </li>
              <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a href="#"><img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/cbd.jpg">
                  <div class="mui-media-body">Color of SIP CBD</div>
                </a>
              </li>
              <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a href="#">
                  <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/yuantiao.jpg">
                  <div class="mui-media-body">静静看这世界</div>
                </a>
              </li>
            </ul>
            <div class="mui-card">
              <div class="mui-card-header">页眉</div>
              <div class="mui-card-content">
                <div class="mui-card-content-inner">
                  包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
                </div>
              </div>
              <div class="mui-card-footer">页脚</div>
            </div>
            <div class="mui-card">
              <div class="mui-card-header mui-card-media">
                <img src="http://www.dcloud.io/hellomui/images/logo.png" style="width:34px">
                <div class="mui-media-body">
                  小M
                  <p>发表于 2016-06-30 15:30</p>
                </div>
              </div>
              <div class="mui-card-content" >
                <img src="http://www.dcloud.io/hellomui/images/yuantiao.jpg" alt="" width="100%"/>
              </div>
              <div class="mui-card-footer">
                <a class="mui-card-link">Like</a>
                <a class="mui-card-link">Comment</a>
                <a class="mui-card-link">Read more</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mui-slider-item mui-control-content">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            自行脑补页面
          </div>
        </div>
      </div>
      <div class="mui-slider-item mui-control-content">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            自行脑补页面
          </div>
        </div>
      </div>
      <div class="mui-slider-item mui-control-content">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            自行脑补页面
          </div>
        </div>
      </div>
      <div class="mui-slider-item mui-control-content">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            自行脑补页面
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  mui.ready(function() {
    mui('.mui-scroll-wrapper').scroll({
      bounce: true,
      indicators: true,
      deceleration:mui.os.ios?0.003:0.0009
    });
    mui('.mui-scroll').on('tap','.mui-control-item:not(.mui-active)',function(){
      mui('.mui-slider').slider().gotoItem(this.getAttribute('data-index'));
    });
  });
</script>
</body>

</html>
